<template>
  <view class="container">
    <view class="title">
      {{ chapterName }}
    </view>
    <template v-if="!isShowMeaning">
      <view class="content">
        <view class="box">
          <view class="box_title">
            <text>看词选义</text>
          </view>
          <view class="word">
            <view class="word_left">
              <text class="word_text1">{{ wordText }}</text>
              <text class="word_text2">{{ wordSoundmark }}</text>
            </view>
            <view class="word_right">
              <view class="word_icon" @click="play()">
                <image
                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/horn.png"
                  mode="widthFix"
                ></image>
              </view>
            </view>
          </view>
          <view class="progress">
            <u-circle-progress
              active-color="rgb(9, 129, 188)"
              inactive-color="rgba(9, 129, 188, 0.35)"
              :percent="percent"
              bg-color="rgba(0,0,0,0)"
            >
              <view class="u-progress-content">
                <view class="u-progress-text">计时</view>
                <view class="u-progress-text">{{ countDown }}s</view>
              </view>
            </u-circle-progress>
          </view>
        </view>
        <view class="box">
          <view class="options" v-if="optionsList.length > 0">
            <view
              class="options_container"
              v-for="(item, index) in optionsList"
              :key="index"
              @click="choiceAnswer(index)"
              :class="{
                hover: choiceIndex === index,
                active: correctIndex === index && isShowAnswer,
                error: errorIndex === index && isShowAnswer,
              }"
            >
              <view class="options_content">
                {{ String.fromCharCode(index + 65) }}.{{ item }}
              </view>
              <view class="options_iamge">
                <image
                  v-if="correctIndex === index && isShowAnswer"
                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/correct.png"
                  mode="widthFix"
                ></image>
                <image
                  v-if="errorIndex === index && isShowAnswer"
                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/error.png"
                  mode="widthFix"
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="button">
        <view
          class="button_content"
          v-if="!isShowAnswer"
          @click="determineChoice()"
        >
          <text>确定</text>
        </view>
        <view class="button_content" v-else @click="moreInformation()">
          <text>更多资料</text>
        </view>
      </view>
    </template>
    <template v-else>
      <view class="content">
        <view class="content_left">
          <view class="info">
            <view class="info_text1">
              {{ wordText }}
            </view>
            <view class="info_text2">
              {{ wordSoundmark }}
            </view>
            <view class="info_text1">
              {{ wordParaphrase }}
            </view>
            <view class="info_text2"> 考频：{{ wordFrequency }} </view>
          </view>
          <view class="sentence">
            <view class="sentence_title"> 例句 </view>
            <view class="sentence_content">
              <view class="sentence_icon" @click="playExample()">
                <image
                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/horn.png"
                  mode="widthFix"
                ></image>
              </view>
              <view class="sentence_text">
                <text class="sentence_text1">
                  {{ exampleEnglish }}
                </text>
                <text class="sentence_text2">
                  {{ exampleChinese }}
                </text>
              </view>
            </view>
          </view>
        </view>
        <view class="content_right">
          <image :src="wordImage" mode="widthFix"></image>
        </view>
      </view>
      <view class="button">
        <view class="button_content" @click="nextQuestion()">
          <text>下一题</text>
        </view>
      </view>
    </template>
  </view>
</template>

<script>
const englishAudioContext = uni.createInnerAudioContext();
englishAudioContext.autoplay = true;
import { arrayRandomly } from "@/libs/tools";
export default {
  components: {},
  computed: {
    percent() {
      if (this.countDown > 0) {
        return parseInt((this.countDown / this.countDownNumber) * 100);
      }
    },
  },
  props: {
    chapterData: {
      type: Object,
      default: null,
    },
    wordData: {
      type: Object,
      default: null,
    },
  },
  created() {
    this.initData();
  },
  data() {
    return {
      chapterName: "",
      wordText: "",
      wordSoundmark: "",
      disyllabic: "",
      wordParaphrase: "",
      wordImage: "",
      wordFrequency: "",
      wordAudio: "",
      exampleEnglish: "",
      exampleChinese: "",
      exampleAudio: "",
      optionsList: [],
      timerId: null,
      countDown: 10,
      countDownNumber: 10,
      correctIndex: -1,
      errorIndex: -1,
      choiceIndex: -1,
      isCorrect: false,
      isShowAnswer: false,
      isShowMeaning: false,
      isClick1: true,
      isClick2: false,
      isClick3: false,
    };
  },
  methods: {
    initData() {
      this.chapterName = this.chapterData.shortName;
      this.wordText = this.wordData.word;
      this.wordParaphrase = this.wordData.wordParaphrase;
      this.wordImage = this.wordData.wordImage;
      this.wordSoundmark = this.wordData.wordSoundmark;
      this.disyllabic = this.wordData.disyllabic;
      this.wordFrequency = this.wordData.wordFrequency;
      this.wordAudio = this.wordData.wordAudio;
      if (this.wordData.sentence) {
        this.exampleEnglish = this.wordData.sentence.sentenceEnglish;
        this.exampleChinese = this.wordData.sentence.sentenceChinese;
        this.exampleAudio = this.wordData.sentence.sentenceAudio;
      }
      this.initOptions();
      this.play();
      this.timer();
    },
    initWord() {
      this.optionsList = [];
      this.timerId = null;
      this.countDown = 10;
      this.correctIndex = -1;
      this.errorIndex = -1;
      this.choiceIndex = -1;
      this.isCorrect = false;
      this.isShowAnswer = false;
      this.isShowMeaning = false;
    },
    initOptions() {
      let wordData = this.wordData;
      this.optionsList.push(
        wordData.optionA,
        wordData.optionB,
        wordData.optionC,
        wordData.wordParaphrase
      );
      this.optionsList = arrayRandomly(this.optionsList);
      this.optionsList.some((item, index) => {
        if (item === this.wordData.wordParaphrase) {
          this.correctIndex = index;
          return true;
        }
      });
    },
    play() {
      if (!englishAudioContext.paused) return;
      englishAudioContext.src = this.wordAudio;
      englishAudioContext.play();
    },
    playExample() {
      if (!englishAudioContext.paused) return;
      englishAudioContext.src = this.exampleAudio;
      englishAudioContext.play();
    },
    timer() {
      this.timerId = setInterval(() => {
        if (this.countDown > 0) {
          this.countDown--;
        } else {
          clearInterval(this.timerId);
          this.determineChoice();
        }
      }, 1000);
    },
    choiceAnswer(index) {
      this.choiceIndex = index;
    },
    determineChoice() {
      if (this.isClick1) {
        if (this.timerId) {
          clearInterval(this.timerId);
        }
        if (this.choiceIndex === this.correctIndex) {
          this.isShowAnswer = true;
          this.isCorrect = true;
        } else {
          this.errorIndex = this.choiceIndex;
          this.isShowAnswer = true;
        }
        this.wordPassSave();
        this.isClick2 = true;
        this.isClick1 = false;
      }
    },
    moreInformation() {
      if (this.isClick2) {
        this.isShowMeaning = true;
        setTimeout(() => {
          this.isClick2 = false;
          this.isClick3 = true;
        }, 50);
      }
    },
    nextQuestion() {
      if (this.isClick3) {
        this.isClick3 = false;
        this.isClick1 = true;
        this.$emit("change");
      }
    },
    wordPassSave() {
      this.$emit("save", this.wordData.id, this.isCorrect);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./WordLook.scss";
</style>
